<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #777;
        }

        a:hover {
            color: #f10180;
        }

        header {
            width: 100%;
            height: 130px;
            margin: 0 auto;
        }

        .header-top {
            width: 100%;
            height: 30px;
            background-color: #f5f5f5;
        }

        .header-right {
            display: flex;
            justify-content: space-between;
            width: 650px;
        }


        .top-middle {
            width: 1200px;
            height: 30px;
            line-height: 30px;
            color: #777;
            font-size: 12.5px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .city {
            display: inline-block;
            width: 10px;
            height: 5px;
            background-image: url(1.png);
            background-position: -60px 0;
            transition: all 0.1s linear;
            transform-origin: center center;
            margin-left: 25px;
        }

        .top-middle>nav:hover .city {
            transform: rotate(180deg);
        }

        .area {
            width: 300px;
            height: 460px;
            border: 1px solid #aaa;
            position: absolute;
            display: none;
        }

        .area-middle {
            width: 250px;
            height: 450px;
            margin: 0 auto;
        }

        .area-middle small {
            display: inline-block;
        }

        .area-middle small a {
            margin-left: 8px;
            font-size: 12px;
            text-align: center;
            color: #777;
        }

        .district {
            width: 85px;
            height: 32px;
            position: relative;
            margin-top: -2px;
        }

        .top-right {
            width: 700px;
            display: flex;
            justify-content: space-between;
        }

        .register {
            width: 125px;
            height: 32px;
            margin-top: -2px;
            display: flex;
            position: relative;
        }

        .register-top {
            width: 285px;
            height: 178px;
            position: absolute;
            top: 30px;
            border: 1px solid #aaa;
            display: none;
        }

        .register-midlle {
            width: 50px;
            height: 50px;
            background-image: url(唯品会/header.png);
            background-position: 0 -180px;
        }

        .content {
            display: flex;
        }

        .enter {
            width: 230px;
            height: 150px;
            margin: 0 auto;
            margin-top: 25px;
        }

        .register-bottom {
            width: 200px;
            display: flex;
            flex-wrap: wrap;
        }

        .register-bottom li a {
            display: inline-block;
            width: 100px;
            color: black;
        }

        .accession {
            display: inline-block;
            width: 65px;
            line-height: 35px;
        }

        .present {
            width: 85px;
            display: flex;
            position: relative;
            /* border: 1px solid violet;  */
        }

        .gift-left {
            width: 15px;
            height: 20px;
            line-height: 20px;
        }

        .cadeau {
            position: absolute;
            width: 460px;
            height: 150px;
            border: 1px solid #aaa;
            margin-left: -200px;
            top: 28px;
            display: none;
        }

        .cadeau-details {
            width: 370px;
            height: 65px;
            margin: 0 auto;
            margin-top: 50px;
            border-top: 2px solid #aaa;
            border-bottom: 1px solid #bbbbbb;
            display: flex;
            justify-content: space-between;
        }

        .cadeau-top {
            content: " ";
            display: inline-block;
            width: 20px;
            height: 19px;
            background-image: url(唯品会/header.png);
            background-position: -52px -199px;
            margin-top: -9px;
            margin-left: -10px;
            z-index: 22;
            line-height: 100px;
        }

        .header-right li {
            width: 85px;
            line-height: 30px;
        }



        .subscript {
            display: inline-block;
            width: 10px;
            height: 5px;
            background-image: url(1.png);
            background-position: -60px 0;
            transition: all 0.1s linear;
            transform-origin: center center;
            margin-left: 5px;
        }

        .header-right>li:hover .subscript {
            transform: rotate(180deg);
        }

        .header-right>li {
            text-align: center;
            position: relative;
        }


        .special-top {
            width: 130px;
            border: 1px solid #aaa;
            display: none;
            position: absolute;
        }

        .special-topone {
            width: 85px;
            border: 1px solid #aaa;
            border-top: #FFFFFF;
            display: none;
            position: absolute;
        }

        .special-toptwo {
            width: 85px;
            border: 1px solid #aaa;
            display: none;
            position: absolute;
        }

        .special-top:hover {
            display: block;
        }

        .special-bottom {
            width: 85px;
        }

        .phone {
            position: relative;
        }

        .cellphone {
            display: inline-block;
            width: 22px;
            height: 20px;
            background-image: url(唯品会/header.png);
            background-position: -92px -144px;
        }

        .phone-top {
            width: 185px;
            height: 200px;
            position: absolute;
            margin-left: -100px;
            border: 1px solid #aaa;
            display: none;
        }

        .code {
            width: 160px;
            height: 190px;
            text-align: center;
            margin: 0 auto;
        }

        .more-top {
            position: relative;
        }

        .more {
            width: 300px;
            height: 160px;
            position: absolute;
            margin-left: -217px;
            border: 1px solid #aaa;
            display: none;
        }

        .more-one {
            width: 270px;
            height: 140px;
            margin: 0 auto;
            margin-left: -30px;
            margin-top: 20px;
        }

        .picture {
            width: 1200px;
            margin: 0 auto;
            display: flex;
        }

        .picture-right {
            width: 900px;
            display: flex;
            justify-content: flex-end;
        }

        .banner {
            width: 100%;
            height: 40px;
            background-color: #f10180;
        }

        .banner-middle {
            width: 1200px;
            margin: 0 auto;
            display: flex;
        }

        .banner-left {
            width: 750px;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
        }

        .banner-left li {
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
        }

        .banner-right li {
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
        }

        .banner-left li a {
            display: inline-block;
            color: #fff;
            text-align: center;
        }

        .banner-right li a {
            display: inline-block;
            color: #fff;
            text-align: center;
        }

        .banner-first {
            background-color: rgb(189, 16, 103);
        }

        .banner-left>li:hover {
            background-color: rgb(189, 16, 103);
        }

        .banner-right>li:hover {
            background-color: rgb(189, 16, 103);
        }

        .banner-right {
            width: 750px;
            line-height: 40px;
            display: flex;
            justify-content: flex-end;
            position: relative;
        }

        .banner-right li img {
            position: absolute;
        }

        .banner-left>li:hover .subscript {
            transform: rotate(180deg);
        }

        .more-five {
            position: relative;
        }

        .more-six {
            width: 600px;
            height: 260px;
            position: absolute;
            margin-left: -550px;
            border: 1px solid slategray;
            background-color: #fff;
            display: none;
        }

        .more-seven {
            width: 550px;
            height: 220px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            margin-top: 20px;
        }

        .more-seven>div {
            margin-left: 10px;
        }

        .more-eight {
            position: relative;
            overflow: hidden;
        }

        .more-nine {
            position: absolute;
            width: 100%;
            height: 200px;
            top: 50%;
            text-align: center;
            font-weight: bold;
            color: #FFFFFF;
            transition: all 0.3s;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .more-eight:hover .more-nine {
            top: 20%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .slideshow {
            position: relative;
        }

        .setting {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 440px;
        }

        .setting-matter {
            width: 100%;
        }

        .slideshow-matter {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }

        .slideshow-one li {
            width: 1200px;
            height: 450px;
            position: absolute;
            background-color: #FFFFFF;
            margin: 0 auto;
            margin-top: -39%;
            margin-left: 3%;
            top: 0;
            left: 0;
            display: none;
        }

        .slideshow-one li.slideshow-top {
            display: block;
        }

        .slideshow-two {
            width: 100%;
            position: absolute;
            left: 0;
            display: flex;
            justify-content: center;
            color: white;
        }


        .slideshow-three li {
            width: 30px;
            height: 65px;
            line-height: 65px;
            margin: 0 auto;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            position: absolute;
            top: calc(10% - 300px);
            /* display: none;   */
        }

        .slideshow-three li:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .ear-left {
            right: -10px;
        }

        .ear-right {
            left: 63px;
        }

        .slideshow-two {
            width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            margin-left: 100px;
            margin-top: -60px;
        }


        .slideshow-bottom {
            width: 300px;
            position: relative;
            border: 3px solid #f10180;
            transition: all 0.5s linear;
            left: 130px;
            top: -33px;
        }

        .headline {
            width: 1250px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;
            margin-top: 100px;
        }

        .headline div {
            margin-right: 10px;
        }

        .headline div:hover {
            opacity: 0.6;
        }

        .handbag {
            display: flex;
            justify-content: flex-end;
        }

        .handbag li {
            margin-right: 30px;
        }

        .handbag li img:hover {
            opacity: 0.6;
        }

        .handbag li div {
            text-align: center;
        }

        .sidebar {
            width: 40px;
            height: 100%;
            top: 0;
            right: 0;
            color: white;
            text-align: center;
            background-color: black;
            position: fixed;
            z-index: 99999999;
            font-size: 14px;
        }

        .sidebar-matter {
            width: 40px;
            height: 700px;
            background-color: black;
            top: 200px;
            left: 0px;
            ;
            position: absolute;
        }

        .accounts {

            width: 40px;
            position: relative;
            text-align: center;
        }

        .accounts-one {
            display: inline-block;
            width: 40px;
            height: 100px;
            background-color: #f10180;
            position: absolute;
            margin-left: -20px;
            /* border: 1px solid violet; */
            color: white;
        }

        .accounts-one span {
            content: '';
            display: inline-block;
            width: 36px;
            height: 30px;
            background-image: url("img/common.png");
            background-position: -28px -230px;
        }

        .accounts>li {
            width: 40px;
            position: relative;
            margin: 5px 0;
            padding: 10px 0;
        }

        .accounts-top {
            width: 275px;
            height: 300px;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            top: 0;
            left: 0px;
            color: #333;
            font-size: 12px;
            transition: all 0.2s linear;
            /* margin-left: -275px; */
            z-index: -1;
        }

        .accounts-middle {
            margin-top: 40px;
        }

        .accounts-middle span {
            position: absolute;
            margin-top: -20px;
            margin-left: 140px;
        }

        .accounts-two {
            background-color: #cccccc;
            border-top: 1px solid #555;
            border-bottom: 1px solid #555;
            display: flex;
            height: 100px;
        }

        .accounts-two nav {
            margin-top: 13px;
            height: 75px;
            width: 133px;
            /* border: 1px solid violet; */
        }

        .bag {
            width: 40px;
            height: 155px;
            line-height: 28px;
            top: 110px;
            left: 0px;
            ;
            position: absolute;
            background-color: #f10180;
        }

        .bag span {
            display: inline-block;
        }

        .coupon-one {
            content: '';
            display: inline-block;
            width: 30px;
            height: 20px;
            background-image: url("img/sprite.png");
            background-position: -123px -45px;
        }

        .coupon {
            width: 40px;
            height: 34px;
            line-height: 34px;
            top: 270px;
            left: 0px;
            ;
            position: absolute;
            background-color: #f10180;
        }

        .collect {
            width: 40px;
            height: 34px;
            line-height: 34px;
            top: 310px;
            left: 0px;
            ;
            position: absolute;
            background-color: #f10180;
        }

        .commodity {
            width: 40px;
            height: 34px;
            line-height: 34px;
            top: 350px;
            left: 0px;
            ;
            position: absolute;
            background-color: #f10180;
        }

        .footprint {
            width: 40px;
            height: 34px;
            line-height: 34px;
            top: 390px;
            left: 0px;
            ;
            position: absolute;
            background-color: #f10180;
        }

        .sidebar-bottom {
            width: 40px;
            height: 70px;
            line-height: 34px;
            top: 650px;
            left: 0px;
            ;
            position: absolute;
            background-color: #f10180;
        }

        .feedback {
            content: '';
            display: inline-block;
            width: 30px;
            height: 20px;
            background-image: url("img/sprite.png");
            background-position: -165px -95px;
        }

        .return {
            content: '';
            display: inline-block;
            width: 30px;
            height: 20px;
            background-image: url("img/sprite.png");
            background-position: -123px -140px;
        }
    </style>
</head>

<body>
    <div>
        <header>
            <div class="header-top">
                <div class="top-middle">
                    <nav class="district">
                        <span>&#x3000;河南</span>
                        <i class="city"></i>
                        <ul class="area" style="z-index: 10000000;  background-color: #fff;">
                            <div class="area-middle">
                                <strong style="width:250px; color:black;  font-size: 14px; border-bottom: dashed 1px; display:inline-block;">请选择所在的收获地区</strong>
                                <li>
                                    <small>A</small>
                                    <small><a href="">安徽</a></small>
                                    <small><a href="">澳门</a></small>
                                </li>
                                <li>
                                    <small>B</small><small><a href="">北京</a></small>
                                </li>
                                <li>
                                    <small>C</small><small><a href="">重庆</a></small>
                                </li>
                                <li>
                                    <small>F</small><small><a href="">福建</a></small>
                                </li>
                                <li>
                                    <small>G</small><small><a href="">广东</a></small> <small><a href="">广西</a></small><small><a href="">贵州</a></small>                                    <small><a href="">甘肃</a></small>
                                </li>
                                <li>
                                    <small>H</small> <small><a href="">河北</a></small> <small><a href="" style="background-color:fuchsia; color:#FFFFFF">河南</a></small>                                    <small><a href="">黑龙江</a></small> <small><a href="">海南</a></small> <small><a href="">湖北</a></small>                                    <small><a href="">湖南</a></small>
                                </li>
                                <li>
                                    <small>J</small><small><a href="">江苏</a></small><small><a href="">吉林</a></small><small><a href="">江西</a></small>
                                </li>
                                <li>
                                    <small>L</small> <small><a href="">辽宁</a></small>
                                </li>
                                <li>
                                    <small>N</small><small><a href="">内蒙古</a></small><small><a href="">宁夏</a></small>
                                </li>
                                <li>
                                    <small>Q</small> <small><a href="">青海</a></small>
                                </li>
                                <li>
                                    <small>S</small> <small><a href="">上海</a></small> <small><a href="">山东</a></small> <small><a href="">山西</a></small>                                    <small><a href="">四川</a></small> <small><a href="">陕西</a></small>
                                </li>
                                <li>
                                    <small>T</small> <small><a href="">台北</a></small> <small><a href="">天津</a></small>
                                </li>
                                <li>
                                    <small>X</small> <small><a href="">西藏</a></small> <small><a href="">香港</a></small> <small><a href="">新疆</a></small>
                                </li>
                                <li>
                                    <small>Y</small> <small><a href="">云南</a></small>
                                </li>
                                <li>
                                    <small>Z</small> <small><a href="">浙江</a></small>
                                </li>
                            </div>
                        </ul>
                    </nav>
                    <ul class="top-right">
                        <div class="register">
                            <span class="accession"><a href="">&#x3000;请登录</a></span>
                            <div class="register-top" style="z-index: 10000000;  background-color: #fff;">
                                <div class="enter">
                                    <div class="content">
                                        <div class="register-midlle"></div>
                                        <div><a href="" style="display:inline-block;width:150px;height:40px;line-height:40px;border-bottom:dashed 1px;color:black;">您好![请登录]</a></div>
                                    </div>
                                    <ul class="register-bottom">
                                        <li><a href="">我的收藏</a></li>
                                        <li><a href="">我的订单</a></li>
                                        <li><a href="">零钱</a></li>
                                        <li><a href="">我的优惠券</a></li>
                                        <li><a href="">我的唯品币</a></li>
                                        <li><a href="">唯品金融</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <li><a href="" style="display:inline-block; width:60px;">&#x3000;注册</a></li>
                        <ul class="header-right">
                            <li class="present">
                                <nav class="gift">
                                    <img src="唯品会\header_sign.gif" alt="" class="gift-left">
                                    <span style="display:inline-block; height:30px;">签到有礼</span>
                                </nav>
                                <div class="cadeau" style="z-index: 10000000;  background-color: #fff;">
                                    <div class="cadeau-details">
                                        <div class="cadeau-top">1天</div>
                                        <div class="cadeau-top">2天</div>
                                        <div class="cadeau-top">3天</div>
                                        <div class="cadeau-top">4天</div>
                                        <div class="cadeau-top">5天</div>
                                        <div class="cadeau-top">6天</div>
                                        <div class="cadeau-top">7天</div>
                                    </div>
                                    <div style="width: 370px; margin: 0 auto; display: flex; justify-content: space-between;">
                                        <a href="" style="text-decoration: underline;">每天签到送惊喜，连续签到更享心动奖励</a>
                                        <a href="" style="color:#FFFFFF; background-color:#f10180;width:72px;height:22px;text-align: center; display: inline-block; line-height: 22px;">签到</a>
                                    </div>
                                </div>
                            </li>
                            <li><a href="">我的订单</a></li>
                            <li class="special">
                                <a href="">我的特卖</a><i class="subscript"></i>
                                <div class="special-top" style="z-index: 10000000;  background-color: #fff;">
                                    <div class="special-bottom">
                                        <div><a href="">品牌收藏(0)</a></div>
                                        <div><a href="">商品收藏(0)</a></div>
                                        <div><a href="">我的足迹(0)</a></div>
                                    </div>
                                </div>

                            </li>
                            <li class="specialone"><a href="">会员俱乐部</a><i class="subscript"></i>
                                <div class="special-topone" style="z-index: 10000000;  background-color: #fff;">
                                    <div class="special-bottom">
                                        <div><a href="">俱乐部首页</a></div>
                                        <div><a href="">唯品币兑换</a></div>
                                        <div><a href="">免费抽大奖</a></div>
                                    </div>
                                </div>

                            </li>
                            <li class="specialtwo"><span>客户服务</span><i class="subscript"></i>
                                <div class="special-toptwo" style="z-index: 10000000;  background-color: #fff;">
                                    <div class="special-bottom">
                                        <div><a href="">联系客服</a></div>
                                        <div><a href="">帮助中心</a></div>
                                        <div><a href="">服务中心</a></div>
                                        <div><a href="">知识产权投诉</a></div>
                                    </div>
                                </div>
                            </li>
                            <li class="phone">
                                <span class="cellphone"></span>
                                <a href="">手机版</a>
                                <div class="phone-top" style="z-index: 10000000;  background-color: #fff;">
                                    <div class="code">
                                        <img src="唯品会\1466134037230.jpg" alt="" style="width:160px;height:165px;">
                                        <strong>随时逛 及时抢</strong>
                                    </div>
                                </div>
                            </li>
                            <li class="more-top">
                                <span>更多</span><i class="subscript"></i>
                                <div class="more" style="z-index: 10000000;  background-color: #fff;">
                                    <div class="more-one">
                                        <div class="more-two">
                                            <div><strong style="margin-left: -100px;">合作专区</strong></div>
                                            <span>联名卡申请</span>
                                            <span>唯品卡</span>
                                            <span>支付专区</span>
                                        </div>
                                        <div class="more-three">
                                            <div> <strong style="margin-left: -100px;">关于我们</strong></div>
                                            <span>Sell on vip </span>
                                            <span>品牌招商</span>
                                            <span>官方博客</span>
                                        </div>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </ul>
                </div>
            </div>
            <div class="header-middle">
                <div class="picture">
                    <div><a href=""><img src="唯品会\1496219375910.png" alt="" style="width:230px;height:100px;"></a></div>
                    <div class="picture-right">
                        <div><a href=""><img src="唯品会\1466131264367.png" alt="" style="width:100px;height:100px;"></a></div>
                        <div><a href=""><img src="唯品会\1466131266290.png" alt="" style="width:100px;height:100px;"></a></div>
                        <div><a href=""><img src="唯品会\1466131268726.png" alt="" style="width:100px;height:100px;"></a></div>
                        <div><a href=""><img src="唯品会\1466131268726.png" alt="" style="width:100px;height:100px;"></a></div>
                    </div>
                </div>
            </div>
            <div class="header-bottom" style="width:100%;height:170px; z-index: 10000000;">
                <nav class="banner">
                    <div class="banner-middle">
                        <ul class="banner-left">
                            <li class="banner-first"><a href="#">首页</a></li>
                            <li><a href="#">唯品国际</a></li>
                            <li><a href="#">母婴</a></li>
                            <li><a href="#">家居家电</a></li>
                            <li><a href="#">男士</a></li>
                            <li><a href="#">美妆</a></li>
                            <li><a href="#">生活超市</a></li>
                            <li><a href="#">金融</a></li>
                            <li class="more-five">
                                <a href="#">更多</a><i class="subscript"></i>
                                <div class="more-six" style="z-index: 10000000;">
                                    <div class="more-seven">
                                        <div class="more-eight"><a href=""><img src="唯品会\1467620677036.jpg" alt="" style=" border-radius: 5px;"></a>
                                            <div class="more-nine"><a href="">女装</a></div>
                                        </div>
                                        <div class="more-eight"><a href=""><img src="唯品会\1467620677036.jpg" alt="" style=" border-radius: 5px;"></a>
                                            <div class="more-nine"><a href="">女装</a></div>
                                        </div>
                                        <div class="more-eight"><a href=""><img src="唯品会\1467620677036.jpg" alt="" style=" border-radius: 5px;"></a>
                                            <div class="more-nine"><a href="">女装</a></div>
                                        </div>
                                        <div class="more-eight"><a href=""><img src="唯品会\1467620677036.jpg" alt="" style=" border-radius: 5px;"></a>
                                            <div class="more-nine"><a href="">女装</a></div>
                                        </div>
                                        <div class="more-eight"><a href=""><img src="唯品会\1467620677036.jpg" alt="" style=" border-radius: 5px;"></a>
                                            <div class="more-nine"><a href="">女装</a></div>
                                        </div>

                                    </div>
                                </div>

                            </li>
                        </ul>
                        <ul class="banner-right">
                            <li><a href=""><span><img src="唯品会\1470377526197.png" alt="" style=" margin-left: -30px;margin-top: 3px;"></span><span>分类</span></a></li>
                            <li><a href=""><span><img src="唯品会\1470377501079.png" alt="" style="margin-left: -30px;margin-top: 3px;"></span><span>预告</span></a></li>
                        </ul>
                    </div>
                </nav>

            </div>
        </header>
        <div class="slideshow" style="margin-top: 45px;">
            <div class="setting">
                <div class="setting-matter"><img src="唯品会\15009750468002.jpg" alt=""></div>
                <div class="slideshow-matter">
                    <ul class="slideshow-one" style="margin: 0 auto;">
                        <li class="slideshow-top"><a href=""><img src="唯品会\lunbo01.jpg" alt=""></a></li>
                        <li><a href=""><img src="唯品会\lunbo02.jpg" alt=""></a></li>
                        <li><a href=""><img src="唯品会\lunbo03.jpg" alt=""></a></li>
                    </ul>
                    <div class="slideshow-">
                        <ul class="slideshow-two">
                            <li class="slideshow-first"><a href="">时尚风暴 最高满199减40</a></li>
                            <li><a href="">净水节 最高500元红包</a></li>
                            <li><a href="">安莉芳集团 跨专场3件8折</a></li>
                        </ul>
                        <div class="slideshow-bottom"></div>
                    </div>
                    <ul class="slideshow-three">
                        <li class="ear-right">&lt;</li>
                        <li class="ear-left">&gt;</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="headline">
            <div><img src="img\ig3r6qj1.bmp" alt=""></div>
            <div><img src="img\cjz9zowv.bmp" alt=""></div>
            <div><img src="img\xc9z89w9.bmp" alt=""></div>
        </div>
        <div style="width:100%;">
            <div style="width:1200px;  margin: 0 auto;">
                <div>
                    <img src="唯品会\title_v2.jpg" alt="">
                </div>
                <ul class="handbag">
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                    <li><img src="唯品会\jm3eiw0l.bmp" alt="">
                        <div>鞋包馆</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="sidebar">
            <di>
                <ul class="sidebar-matter">
                    <li class="accounts">
                        <a href="" class="accounts-one"><span></span><p>帐号</p></a>
                        <div class="accounts-top">
                            <div class="accounts-middle">
                                <span><a href="">&times;</a></span>
                                <img src="img\11.jpg" alt="">
                                <p> 你好！请
                                    <a href="">登录</a> |
                                    <a href="">注册</a>
                                </p>
                            </div>
                            <div class="accounts-two">
                                <nav><span class="cellphone"></span>
                                    <p>我的订单</p>
                                </nav>
                                <nav><span class="cellphone"></span>
                                    <p>我的消息</p>
                                </nav>
                            </div>
                            <div style="margin-top:10px;"><a href="" style="margin-left: 200px;color:#20a0cd">会员俱乐部</a></div>
                        </div>
                    </li>
                    <li class="bag">
                        <span class="cellphone"></span>
                        <span style="padding:0px 10px;">购物袋</span>
                        <span class="cellphone"></span>
                    </li>
                    <li>
                        <div class="coupon"><a href="" class="coupon-one"></a></div>
                        <div class="collect"><a href="" class="coupon-one"></a></div>
                        <div class="commodity"><a href="" class="coupon-one"></a></div>
                        <div class="footprint"><a href="" class="coupon-one"></a></div>
                    </li>
                    <li class="sidebar-bottom">
                        <div class="feedback"></div>
                        <div class="return"></div>
                    </li>
                </ul>
        </div>
    </div>

    <div style="height:2000px;"></div>
</body>

</html>
<script>
    var district = document.querySelector('.district');
    var area = document.querySelector('.area');
    district.onmouseover = function () {
        district.style.backgroundColor = '#ffffff';
        district.style.border = '1px solid #aaa';
        district.style.borderBottom = '2px solid #FFFFFF';
        area.style.display = 'block';

    }
    district.onmouseout = function () {
        area.style.display = 'none';
        district.style.backgroundColor = '#f5f5f5';
        district.style.border = '0px';
    }


    var register = document.querySelector('.register');
    var registerTop = document.querySelector('.register-top');

    register.onmouseover = function () {
        register.style.backgroundColor = '#ffffff';
        register.style.border = '1px solid #aaa';
        register.style.borderBottom = '2px solid #FFFFFF';
        registerTop.style.display = 'block';

    }
    register.onmouseout = function () {
        register.style.backgroundColor = '#f5f5f5';
        register.style.border = '0px';
        registerTop.style.display = 'none';
    }
    var present = document.querySelector('.present');
    var gift = document.querySelector('.gift');
    var cadeau = document.querySelector('.cadeau');
    present.onmouseover = function () {
        gift.style.backgroundColor = '#ffffff';
        gift.style.border = '1px solid #aaa';
        gift.style.borderBottom = '2px solid #FFFFFF';
        cadeau.style.display = 'block';

    }
    present.onmouseout = function () {
        gift.style.backgroundColor = '#f5f5f5';
        gift.style.border = '0px';
        cadeau.style.display = 'none';
    }



    var specialTop = document.querySelector('.special-top');
    var special = document.querySelector(' .special');
    special.onmouseover = function () {
        special.style.backgroundColor = '#ffffff';
        special.style.border = '1px solid #aaa';
        special.style.borderBottom = '2px solid #FFFFFF';
        specialTop.style.display = 'block';

    }
    special.onmouseout = function () {
        special.style.backgroundColor = '#f5f5f5';
        special.style.border = '0px';
        specialTop.style.display = 'none';
    }

    var specialTopone = document.querySelector('.special-topone');
    var specialone = document.querySelector(' .specialone');
    specialone.onmouseover = function () {
        specialone.style.backgroundColor = '#ffffff';
        specialone.style.border = '1px solid #aaa';
        specialone.style.borderBottom = '2px solid #FFFFFF';
        specialTopone.style.display = 'block';

    }
    specialone.onmouseout = function () {
        specialone.style.backgroundColor = '#f5f5f5';
        specialone.style.border = '0px';
        specialTopone.style.display = 'none';
    }


    var specialToptwo = document.querySelector('.special-toptwo');
    var specialtwo = document.querySelector(' .specialtwo');
    specialtwo.onmouseover = function () {
        specialtwo.style.backgroundColor = '#ffffff';
        specialtwo.style.border = '1px solid #aaa';
        specialtwo.style.borderBottom = '2px solid #FFFFFF';
        specialToptwo.style.display = 'block';

    }
    specialtwo.onmouseout = function () {
        specialtwo.style.backgroundColor = '#f5f5f5';
        specialtwo.style.border = '0px';
        specialToptwo.style.display = 'none';
    }


    var phone = document.querySelector('.phone');
    var phoneTop = document.querySelector(' .phone-top');
    phone.onmouseover = function () {
        phone.style.backgroundColor = '#ffffff';
        phone.style.border = '1px solid #aaa';
        phone.style.borderBottom = '2px solid #FFFFFF';
        phoneTop.style.display = 'block';

    }
    phone.onmouseout = function () {
        phone.style.backgroundColor = '#f5f5f5';
        phone.style.border = '0px';
        phoneTop.style.display = 'none';
    }


    var more = document.querySelector('.more');
    var moreTop = document.querySelector(' .more-top');
    moreTop.onmouseover = function () {
        moreTop.style.backgroundColor = '#ffffff';
        moreTop.style.border = '1px solid #aaa';
        moreTop.style.borderBottom = '2px solid #FFFFFF';
        more.style.display = 'block';

    }
    moreTop.onmouseout = function () {
        moreTop.style.backgroundColor = '#f5f5f5';
        moreTop.style.border = '0px';
        more.style.display = 'none';
    }

    var moreSix = document.querySelector('.more-six');
    var moreFive = document.querySelector(' .more-five');
    moreFive.onmouseover = function () {
        moreFive.style.backgroundColor = '#f10180';
        moreSix.style.display = 'block';

    }
    moreFive.onmouseout = function () {
        moreFive.style.backgroundColor = '#f10180';
        moreSix.style.display = 'none';
    }



    var accounts = document.querySelector('.accounts');
    var accountsTop = document.querySelector('.accounts-top');
    accounts.onmouseover = function () {
        accounts.style.backgroundColor = '#f10180';
        accountsTop.style.marginLeft = '-275px';

    }
    accounts.onmouseout = function () {
        accounts.style.backgroundColor = '#f10180';
        accountsTop.style.marginLeft = '0px';
    }




    var headerBottom = document.querySelector('.header-bottom');
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(scrollTop);
        if (scrollTop >= 160) {
            headerBottom.style.position = 'fixed';
            headerBottom.style.left = '0px';
            headerBottom.style.top = '0px';
        } else {
            headerBottom.style.position = 'static';
        }
    }


    window.onload = function () {
        var setting = document.querySelector(".setting");
        var slideshowOne = document.querySelectorAll(".slideshow-one li");
        var two = document.querySelectorAll(".slideshow-two li");
        var bottom = document.querySelector(".slideshow-bottom");
        var right = document.querySelector(".ear-right");
        var left = document.querySelector(".ear-left");
        var a = ["130px", "500px", "870px"];
        var index = 0;
        function rightImg() {
            index = index == 0 ? slideshowOne.length - 1 : index - 1;
            showImg();
        }
        function leftImg() {
            index = index == slideshowOne.length - 1 ? 0 : index + 1;
            showImg();
        }


        function showImg() {
            for (var i = 0; i < slideshowOne.length; i++) {
                slideshowOne[i].className = "";
            }
            slideshowOne[index].className = "slideshow-top";
            bottom.style.left = a[index];
        }
        var timer = setInterval(leftImg, 1000);
        for (var i = 0; i < two.length; i++) {
            two[i].index = i;
            two[i].onmouseover = function () {
                clearInterval(timer);
                timer = null;
                index = this.index;
                showImg();
            }
            two[i].onmouseout = function () {
                if (timer) {
                    return;
                }
                timer = setInterval(leftImg, 1000);
            }
        }

        setting.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            right.onclick = function () {
                rightImg();
            }
            left.onclick = function () {
                leftImg();
            }
        }
        setting.onmouseout = function () {
            if (timer) {
                return;
            }
            timer = setInterval(leftImg, 1000);
        }

    }

</script>